<template>
  <el-dialog title="直接出库" v-model="dialogVisible" width="60%">
    <el-form label-width="120px" @submit.prevent>
      <el-form-item label="选择仓库">
        <el-radio-group v-model="whId" @change="getPositions">
          <el-radio-button v-for="i in whOptions" :key="i.WarehouseId" :label="`${i.WarehouseCode} ${i.WarehouseName}`"
            :value="i.WarehouseId">
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item class="mt-20" label="起始点位">
        <el-radio-group v-model="StartPositionId">
          <el-radio-button v-for="i in SPositionOptions" :key="i.PositionId" :value="i.PositionId"
            :label="i.PositionCode">
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item class="mt-20" label="目标点位">
        <el-radio-group v-model="EndPositionId">
          <el-radio-button v-for="i in EPositionOptions" :key="i.PositionId" :value="i.PositionId"
            :label="i.PositionCode">
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item class="mt-20" label="扫描容器" >
        <el-input ref="containerCode" v-model="containerCode" :disabled="!EndPositionId" placeholder="扫描容器条码或输入按回车"
          @keyup.enter.prevent="afterScanContainer" clearable></el-input>
      </el-form-item>
    </el-form>
    <template v-slot:footer>

      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="btnLoading" @click="confirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import dayjs from 'dayjs'
export default {
  components: {},
  props: {
    list:{
      type: Array,
      default: () => {
        return []
      }
    },
    item:{
      type: Object,
      default: () => {
        return {}
      }
    },
    modelValue: {
      type: Boolean,
      default: false,
    },
    warehouseId: {
      type: Number,
      default: 0,
    },
    ContainerCode: {
      type: String,
      default: "",
    },
  },
  computed: {
    dialogVisible: {
      get: function () {
        return this.modelValue
      },
      set: function (v) {
        this.$emit('update:modelValue', v)
      },
    },
  },
  data: function () {
    return {
      whId: null,
      containerCode: null,
      positionId: null,
      whOptions: [],
      SPositionOptions: [],
      btnLoading: false,
      EndPositionId: null,
      StartPositionId: null,
      EPositionOptions:[]
    }
  },
  watch: {
    warehouseId: {
      handler: function (val) {
        this.whId = val
        this.getPositions()
      },
      immediate: true
    },
    ContainerCode:{
      handler: function (val) {
        this.containerCode = val
      },
      immediate: true
    }
  },
  methods:{
    confirm(){
      let data = {
        WarehouseId: this.whId,
        ContainerCode: this.containerCode,
        DestStockId: this.EndPositionId,
        StartStockId: this.StartPositionId,
        // details:this.list.map(i=> {
        //   return {
        //     OrderNo:this.item.OrderNo,
        //     LotNo: i.RequestLotNo,
        //     LotDateCode: dayjs(i.RequestDate).format('YYYYMMDD'),
        //     MaterialId: i.MaterialId,
        //     MaterialCode: i.MaterialCode,
        //     MaterialName: i.MaterialName,
        //     Qty: i.StayQty
        //   }
        // })

      }
      this.http.post(this.$api.WmsStock + 'directOutbound', data).then((r) => {
        this.EndPositionId = null
        this.dialogVisible = false
      })
    },
    getWhs() {
      this.http.post(this.$api.warehouse + 'getPageData', {
        rows: 100,
        wheres: JSON.stringify([])
      }).then((r) => {
        this.whOptions = r.rows.sort((a, b) => (a.WarehouseCode > b.WarehouseCode ? 1 : -1))
        if(this.whOptions.length ==1) {
          this.whId = this.whOptions[0].WarehouseId
          this.getPositions()
        } 
      })
    },
    getPositions() {
      let wheres = [{ name: 'WarehouseId', value: this.whId }]
      // wheres.push({ name: 'IsStockOutPort', value: 1 })
      // wheres.push({ name: 'IsStockInPort', value: 0 })
      this.http.post(this.$api.position + 'getPageData', {
        rows: 100,
        wheres: JSON.stringify(wheres)
      }).then((r) => {
        this.EPositionOptions = r.rows.filter(i => i.IsStockOutPort == 1 && i.IsStockInPort == 0).sort((a, b) => (a.PositionCode > b.PositionCode ? 1 : -1))
        this.SPositionOptions = r.rows.filter(i => i.IsStockOutPort == 1 && i.IsStockInPort == 1).sort((a, b) => (a.PositionCode > b.PositionCode ? 1 : -1))
        if(this.SPositionOptions.length == 1) {
          this.StartPositionId = this.SPositionOptions[0].PositionId
        }
      })
    },
    afterScanContainer(){
      this.http.get(this.$api.container + 'checkContainer', {
        WarehouseId:this.whId,
        ContainerCode:this.containerCode
      }).then((r) => {

      })
    },
  },
  created() {
    this.getWhs()
  },
  activated() { },
  mounted() { },
}
</script>
<style lang="scss" scoped>
:deep(.el-radio-button__orig-radio:disabled:checked+.el-radio-button__inner) {
  background-color: #7300e6;
}
</style>
